<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <!-- 导入页面 -->
      <el-tab-pane label="Excel导入" name="import">
        <CurriculumImport />
      </el-tab-pane>

      <!-- 生成页面 -->
      <el-tab-pane label="课程体系生成" name="generate">
        <CurriculumGenerate />
      </el-tab-pane>

      <!-- 微调页面 -->
      <el-tab-pane label="课程体系微调" name="adjust">
        <CurriculumAdjust />
      </el-tab-pane>

      <!-- 查看页面 -->
      <el-tab-pane label="课程体系查看" name="view">
        <CurriculumView />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CurriculumImport from './CurriculumImport'
import CurriculumGenerate from './CurriculumGenerate'
import CurriculumAdjust from './CurriculumAdjust'
import CurriculumView from './CurriculumView'

export default {
  name: 'CurriculumManagement',
  components: {
    CurriculumImport,
    CurriculumGenerate,
    CurriculumAdjust,
    CurriculumView
  },
  data() {
    return {
      activeTab: 'import'
    }
  },
  methods: {
    handleTabClick(tab) {
      // 切换标签时触发对应数据加载
      if (tab.name === 'adjust') {
        this.$refs.curriculumAdjust.fetchData()
      } else if (tab.name === 'view') {
        this.$refs.curriculumView.fetchData()
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
